<template>
	<div class='list' ref='wrapper'>
		<div>
	<div class="area">
		<div class="title border-topbottom">当前城市</div>
		<div class="button-list">
			<div class='button-wrapper'>
			<div class='button'>{{this.currentCity}}</div>
		</div>
		</div>
	</div>
	<div class="area">
		<div class="title border-topbottom">热门城市</div>
		<div class="button-list">
			<div class='button-wrapper' v-for='item of hotCities' :key='item.id'>
			<div class='button' @click='handleClick(item.name)' >{{item.name}}</div>
		    </div>
	    </div>
	</div>
	<div class="area" v-for='(item,key) of cities' :key='key' :ref='key'>                       
		<div class="title ">{{key}}</div>
		<div class='item-list' v-for='city of item' :key='item.id'>
		<div class='item border-topbottom' @click='handleClick(city.name)'>{{city.name}}</div>
	</div>
   </div>
    </div>
	</div>
</template>
<script>
import BScroll from 'better-scroll'
import {mapState,mapMutations} from 'vuex'
	export default{
		name:'cityList',
		computed:{
			...mapState({
				currentCity:'city'
			})
		},
		mounted:function(){
			//wrapper区域用scroll来控制滚动
			this.scroll=new BScroll(this.$refs.wrapper);
		},
		props:{
			hotCities:Array,
			cities:Object,
			letter:String,
		},
		methods:{
			handleClick:function(city){
				 this.changeCity(city);
				 this.$router.push('/');
			},
			...mapMutations(['changeCity'])
		},
		watch:{
			letter:function(){
				if(this.letter){
					var element=this.$refs[this.letter][0];
					this.scroll.scrollToElement(element)
				}
			}
		}	
}
</script>
<style lang='stylus' scoped>
@import '~styles/varibles.styl'
.border-topbottom
	&:before
		border-color:#ccc
	&:after
		border-color:#ccc
.border-topbottom
	&:after
		border-color:#ccc
.list
	overflow:hidden
	position:absolute
	top:1.58rem
	left:0
	right:0
	bottom:0
	.title
		line-height:0.44rem
		background:#eee
		padding-left:0.2rem
		font-size:0.26rem
		color:#666
	.button-list
		overflow:hidden
		padding:0.1rem 0.6rem 0.1rem 0.1rem
		.button-wrapper
			float:left
			width:33.33%
			.button
				text-align:center
				padding:0.1rem 0
				border:0.02rem solid #ccc
				border-radius:0.06rem
				margin:0.1rem	
	.item-list
		.item
			line-height:0.66rem
			padding-left:0.2rem
			color:#666

</style>